<template>
	<view>
		<tarbar class="tarbar"><h4 class="tb_solt">发现</h4></tarbar>
		<view class="main">
			<view class="item" @tap="goDynamic">
				<view class="left one">
					<view><image src="../../static/images/other/pyq.png" mode="widthFix"></image></view>
				</view>
				<view class="center">朋友圈</view>
				<view class="tip one">
					<view class="">
						<image v-if="getDyNotify.length > 0" :src="getDyNotify[0].fromImg" mode="scaleToFill"></image>
						<image class="about" v-if="getDyNotify.length == 0 && getUnReadNotify > 0" src="../../static/images/dynamic/about2.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="right">></view>
			</view>
			<view class="item" @tap="saoma">
				<view class="left one">
					<view><image src="../../static/images/other/sys.png" mode="widthFix"></image></view>
				</view>
				<view class="center">扫一扫</view>
				<view class="tip one">
					<view class=""><!-- <image src="../../static/images/img/one.png" mode="scaleToFill"></image> --></view>
				</view>
				<view class="right">></view>
			</view>
			<view class="item" @tap="openMap">
				<view class="left one">
					<view><image src="../../static/images/other/dt.png" mode="widthFix"></image></view>
				</view>
				<view class="center">地图</view>
				<view class="tip one">
					<view class=""><!-- <image src="../../static/images/img/one.png" mode="scaleToFill"></image> --></view>
				</view>
				<view class="right">></view> 
			</view> 
			<!-- <view class="item">
				<view class="left one">
					<view><image src="../../static/images/other/sc.png" mode="widthFix"></image></view>
				</view>
				<view class="center">收藏</view>
				<view class="right">></view>
			</view> -->
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import request from '../../api/request.js';
export default {
	data() {
		return {};
	},
	computed: {
		...mapGetters(['getDyNotify', 'getUnReadNotify'])
	},
	onShow() {
		this.$store.commit('prompt');
	},
	methods: {
		async goDynamic() {
			let res = await request({
				url: '/dynamic/notify/remove',
				data: {
					token: uni.getStorageSync('token')
				},
				method: 'POST'
			});
			this.$store.dispatch('getDyNotify');
			setTimeout(() => {
				uni.navigateTo({
					url: '../dynamic/dynamic'
				});
			}, 100);
		},
		// 扫一扫
		saoma() {
			uni.scanCode({
				success: function(res) {
					console.log(JSON.stringify(res));
				}
			});
		},
		// 地图
		openMap(){
			uni.getLocation({
			    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			    success: function (res) {
					console.log(res) 
			        const latitude = res.latitude;
			        const longitude = res.longitude;
			        uni.openLocation({
			            latitude: latitude,
			            longitude: longitude,
			            success: function () {
			                console.log('success');
			            }
			        });
			    }
			});
		}
	}
};
</script>

<style lang="scss">
@import '../../commons/css/mycss.scss';

.main {
	padding-top: 88rpx;
	box-sizing: border-box;
	height: calc(100vh - 100rpx);
	width: 100vw;
	background: #f7f7f7;
}
/* #ifdef APP-PLUS */
.main {
	padding-top: 150rpx;
}
/* #endif */
.item {
	display: flex;
	height: 88rpx;
	background: white;
	padding: 0rpx 20rpx 0rpx 10rpx;
	margin-bottom: 8rpx;
	.one {
		flex: 2;
	}
	.left {
		display: flex;
		justify-content: center;
		align-items: center;
		view {
			width: 50rpx;
			height: 50rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.center {
		height: 88rpx;
		line-height: 88rpx;
		flex: 10;
		font-size: 34rpx;
		text-indent: 10rpx;
	}
	.tip {
		display: flex;
		justify-content: center;
		align-items: center;
		view {
			width: 60rpx;
			height: 60rpx;
			border-radius: 10rpx;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.right {
		flex: 1;
		font-size: 40rpx;
		color: #ccc;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
	}
}
</style>
